<template>
  <div class="empty-state" :class="sizeClass">
    <!-- 图标区域 -->
    <div class="empty-icon">
      <el-icon v-if="icon" :size="iconSize">
        <component :is="icon" />
      </el-icon>
      <div v-else-if="illustration" class="empty-illustration">
        <component :is="illustrationComponent" />
      </div>
      <el-icon v-else :size="iconSize" class="default-icon">
        <Box />
      </el-icon>
    </div>

    <!-- 文本区域 -->
    <div class="empty-content">
      <div v-if="title" class="empty-title">{{ title }}</div>
      <div v-if="description" class="empty-description">{{ description }}</div>
      
      <!-- 自定义内容插槽 -->
      <div v-if="$slots.default" class="empty-slot">
        <slot />
      </div>
    </div>

    <!-- 操作区域 -->
    <div v-if="$slots.actions || showDefaultAction" class="empty-actions">
      <slot name="actions">
        <el-button 
          v-if="showDefaultAction" 
          :type="actionType" 
          @click="handleAction"
        >
          {{ actionText }}
        </el-button>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Box, 
  DocumentDelete, 
  Search, 
  Connection, 
  Warning,
  FolderOpened,
  Picture,
  User,
  ShoppingCart,
  Bell,
  Star
} from '@element-plus/icons-vue'

// 预设的插画组件（可以是SVG或自定义组件）
const illustrations = {
  'no-data': Box,
  'no-result': Search,
  'no-network': Connection,
  'error': Warning,
  'no-file': DocumentDelete,
  'no-folder': FolderOpened,
  'no-image': Picture,
  'no-user': User,
  'no-order': ShoppingCart,
  'no-notification': Bell,
  'no-favorite': Star
}

export interface EmptyStateProps {
  // 尺寸
  size?: 'small' | 'default' | 'large'
  // 标题
  title?: string
  // 描述
  description?: string
  // 自定义图标
  icon?: any
  // 图标大小
  iconSize?: number
  // 预设插画
  illustration?: keyof typeof illustrations
  // 是否显示默认操作按钮
  showDefaultAction?: boolean
  // 操作按钮文本
  actionText?: string
  // 操作按钮类型
  actionType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
}

const props = withDefaults(defineProps<EmptyStateProps>(), {
  size: 'default',
  title: '暂无数据',
  description: '',
  showDefaultAction: false,
  actionText: '刷新',
  actionType: 'primary'
})

const emit = defineEmits<{
  action: []
}>()

// 尺寸样式类
const sizeClass = computed(() => `empty-state--${props.size}`)

// 图标大小
const iconSize = computed(() => {
  if (props.iconSize) return props.iconSize
  
  switch (props.size) {
    case 'small': return 48
    case 'large': return 80
    default: return 64
  }
})

// 插画组件
const illustrationComponent = computed(() => {
  return props.illustration ? illustrations[props.illustration] : Box
})

// 处理操作点击
const handleAction = () => {
  emit('action')
}
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 200px;
}

.empty-state--small {
  padding: 20px 16px;
  min-height: 120px;
}

.empty-state--large {
  padding: 60px 24px;
  min-height: 300px;
}

/* 图标区域 */
.empty-icon {
  margin-bottom: 16px;
  color: #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state--small .empty-icon {
  margin-bottom: 12px;
}

.empty-state--large .empty-icon {
  margin-bottom: 24px;
}

.empty-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.default-icon {
  opacity: 0.6;
}

/* 内容区域 */
.empty-content {
  margin-bottom: 20px;
  max-width: 400px;
}

.empty-state--small .empty-content {
  margin-bottom: 16px;
  max-width: 300px;
}

.empty-state--large .empty-content {
  margin-bottom: 32px;
  max-width: 500px;
}

.empty-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.4;
}

.empty-state--small .empty-title {
  font-size: 14px;
  margin-bottom: 6px;
}

.empty-state--large .empty-title {
  font-size: 18px;
  margin-bottom: 12px;
}

.empty-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 12px;
}

.empty-state--small .empty-description {
  font-size: 12px;
  margin-bottom: 8px;
}

.empty-state--large .empty-description {
  font-size: 16px;
  margin-bottom: 16px;
}

.empty-slot {
  margin-top: 12px;
}

/* 操作区域 */
.empty-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state--small .empty-actions .el-button {
  padding: 8px 16px;
  font-size: 12px;
}

.empty-state--large .empty-actions .el-button {
  padding: 12px 24px;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .empty-state {
    padding: 30px 16px;
  }
  
  .empty-content {
    max-width: 280px;
  }
  
  .empty-title {
    font-size: 14px;
  }
  
  .empty-description {
    font-size: 12px;
  }
  
  .empty-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .empty-actions .el-button {
    width: 120px;
  }
}

/* 主题适配 */
.dark .empty-icon {
  color: #4c4d4f;
}

.dark .empty-title {
  color: #e5eaf3;
}

.dark .empty-description {
  color: #a3a6ad;
}
</style>
